<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.paging{
			display: flex;
/*			justify-content: center;*/
			align-items: center;
		}
		.pageIndex{
			display: flex;

		}
		.pageIndex span{
			width: 30px;
			height: 30px;
			border: 1px solid #ccc;
			margin: 5px;
			text-align: center;
			line-height: 30px;
		}
		.active{
			background: blue;
			color: #fff;
			border-color:blue ;
		}
		li{
			list-style: none;
		}
	</style>
</head>
<body>
<ul>
	
</ul>

<div class="paging">
	<p class="left">上一页</p>
	<div class="pageIndex">
		<!-- <span class="active">1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span> -->
	</div>
	<p class="right">下一页</p>
</div>

<script type="text/javascript">
	//定义页数
	let pages = 5
	let pageIndex = document.querySelector('.pageIndex')
	//生成页码数
	for(let i = 0;i < pages; i++){
		pageIndex.innerHTML+=`<span>${i+1}</span>`
		document.querySelector('span').className = 'active'
	}
	//获取所有页码绑定点击事件
	let spans = document.querySelectorAll('.pageIndex span')
	for(let i = 0;i < spans.length; i++){
		spans[i].onclick = function() {
			page(this.innerText)
			//清空上一个active
			document.querySelector('.active').className = ''
			this.className = 'active'
		}
	}

	//上一页 下一页
	let left = document.querySelector('.left')
	let right = document.querySelector('.right')

	left.onclick = function() {
		let nowAct = document.querySelector('.active')
		if(nowAct.previousElementSibling){
			nowAct.previousElementSibling.onclick()
		}else{
			alert('到头了')
		}
	}

	right.onclick = function() {
		let nowAct = document.querySelector('.active')
		if(nowAct.nextElementSibling){
			nowAct.nextElementSibling.onclick()
		}else{
			alert('到头了')
		}
	}


	let ul = document.querySelector('ul')
	//登录
	function login() {
		let xhr = new XMLHttpRequest()
		//2.连接服务 post请求不能拼接参数
		xhr.open('post',"http://wish.byesame.com/login")
		//请求头  前固定后问端
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
		//3.发送数据
		xhr.send(`userName=admin&passWord=123456`)
		//4.接受数据
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4){
				let res = JSON.parse(xhr.responseText)
				console.log(res)
				//将token存储到本地 localStorage.setItem('属性名','属性值')
				if(res.code == 200){
					localStorage.setItem('token',res.data.token)
					//跳转地址
					// location.href = './04登录token.html'
				}
			}
		}

	}
	login()
	//获取许愿留言列表
	function page(val){
		let xhr = new XMLHttpRequest()
		//2.连接服务 post请求不能拼接参数
		xhr.open('get',`http://wish.byesame.com/admin?page=${val}&rows=10`)
		xhr.setRequestHeader('token',localStorage.getItem('token'))
		xhr.send()
		//4.接受数据
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4){
				let res = JSON.parse(xhr.responseText)
				console.log(res)			
				if(res.code == 200){
					ul.innerHTML = ''
					for(let i = 0;i<res.data.list.length;i++){
						ul.innerHTML += `<li>
		<span>${res.data.list[i].id}</span>
		<span>${res.data.list[i].name}</span>
		<span onclick = 'del(${res.data.list[i].id})'>删除</span>
	</li>` 
				}
			}
		}
	}
}
page(1)

//删除
function del(id) {
	//接口
	console.log(id)
	let xhr = new XMLHttpRequest()

	// 2.连接服务
	xhr.open('delete','http://wish.byesame.com/admin')
	xhr.setRequestHeader('token',localStorage.getItem('token'))
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
	xhr.send(`id=${id}`)
	xhr.onreadystatechange = function() {
			if(xhr.readyState == 4){
				let res = JSON.parse(xhr.responseText)
				console.log(res)
				//删除成功
				if(res.code = 200){
					page(1)
					// page(document.querySelector('.active').innerText)
					alert('删除成功')
				}
			}
		}
}
</script>
</body>
</html>